<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
</head>
<link rel="stylesheet"
      href="../users/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../users/css/login.css">
<link href="layui/layui.css"/>
<style type="text/css">
    body {
        background-image: url("../users/image/bg.jpg");
    }
</style>
<body>

<div class="materialContainer">
    <div class="box">
        <div class="title">欢迎登录-PIGS-SHOP</div>
        <div class="input">
            <label for="name">用户名</label>
            <input type="text" name="name" id="name">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="pass">密码</label>
            <input type="password" name="pass" id="pass">
            <span class="spin"></span>
        </div>
        <div class="button login">
            <button id="loginBtn">
                <span>登录</span>
                <i class="fa fa-check"></i>
            </button>
        </div>

    </div>

</div>


<script src="../users/js/jquery.min.js"></script>
<script src="../users/js/login.js"></script>
<script src="../layui/layui.js"></script>
<script type="text/javascript">

    layui.use('layer', function () {
        var $ = layui.jquery, layer = layui.layer;
        $("#loginBtn").on('click', function () {
            $.ajax({
                url: "../users/userLogin",
                data: {
                    name: $("#name").val(),
                    userPassword: $("#pass").val(),
                },
                type: 'post',
                success: function (data) {
                    console.log(data)

                    if (data.code == 200) {
                        layer.msg("登录成功",{shift:6,offset:'lb'})

                        /**
                         * var storage=window.sessionStorage ;
                         storage.setItem("name",$("#name").val());
                          * @type {Storage}
                         */

                        window.location.href = "../shop/products.html";
                    }
                    layer.msg(data.msg,{shift:6,offset:'lb'})

                },
            });
        })

    })

</script>
</body>
</html>